<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      margin: 0;
    }
    .dv {
      width: 100px;
      height: 100px;
      background: deepskyblue;
      cursor: move;
      position: absolute;
    }
  </style>
  <body>
    <div class="dv"></div>
  </body>
</html>
<script>
  //拖拽

  // 涉及到的鼠标事件有 mousedown mousemove mouseup

  // 拖拽原理

  // 鼠标移动的时候实时获取鼠标光标的坐标 pageX pageY

  //将鼠标的坐标pageX pageY赋值给盒子的left和top

  //获取元素

  var dv = document.querySelector(".dv");

  dv.onmousedown = function (e) {
    //鼠标按下去的时候，盒子需要移动

    //获取可视区的宽度
    var clientWidth = document.documentElement.clientWidth;
    //获取可视区域高度
    var clientHeight = document.documentElement.clientHeight;

    //要立马获得盒子中的坐标

    var ofX = e.offsetX;
    var ofY = e.offsetY;

    //   还需要注册一个mousemove的事件

    document.onmousemove = function (e) {
      // 获取鼠标坐标
      var pgx = e.pageX - ofX;
      var pgy = e.pageY - ofY;

      // 需要一个阈值 这个阈值设定为100 就是我们盒子距离浏览器的边框 如果小于这个值 我们就要盒子吸附

      // 盒子所谓的‘吸附’在浏览器的左边框 其实就是将盒子的left设为0

      //左边的吸附
      if (pgx <= 100) {
        pgx = 0;
      }
      // 顶边的吸附
      if (pgy <= 100) {
        pgy = 0;
      }
      //右边的吸附
      if (clientWidth - (pgx + dv.offsetWidth) <= 100) {
        // 右边吸附的最大值是多少？
        pgx = clientWidth - dv.offsetWidth;
      }
      //底边的吸附
      if (clientHeight - (pgy + dv.offsetHeight) <= 100) {
        //底边吸附的最大值是多少？
        pgy = clientHeight - dv.offsetHeight;
      }
      //   对盒子的left和top进行赋值
      dv.style.left = pgx + "px";
      dv.style.top = pgy + "px";
    };
  };
  //鼠标弹起的时候 将mousemove的处理函数去掉
  dv.onmouseup = function () {
    document.onmousemove = null; //清空mousemove的处理函数
  };
</script>
